<template>

  <table-view
    max-height="350"
    border
    :data="list"
    size="small"
    header-cell-class-name="table-header"
  >
    <el-table-column
      type="index"
      width="55"
      label="序号"
    />

    <el-table-column
      header-align="center"
      :min-width="120"
      align="center"
      label="配送模式"
      prop="productName"
    >
      <template #default="scope">
        {{ getLabel('distributor_mode', scope.row.rddType) }}
      </template>
    </el-table-column>

    <el-table-column
      header-align="center"
      :min-width="160"
      :show-overflow-tooltip="true"
      label="配送商"
      prop="distributeName"
    >
      <template #default="scope">
        <span
          class="main-color"
          @click="handlToDistributeName(scope.row)"
        >
          {{ scope.row.distributeName }}
        </span>
      </template>
    </el-table-column>

    <el-table-column
      header-align="center"
      :min-width="120"
      label="配送费"
      prop="type"
    >
      <template #default="scope">
        <div>
          <div
            v-if="scope.row.computeMode==='固定价格'"
            style="text-align: center"
          >
            <span>{{ isInteger(scope.row.distributePrice) }}元</span>
            <span>/{{ getLabel('sell_unit',unit) }}</span>
          </div>
          <div
            v-if="scope.row.computeMode==='终端价百分比'"
            style="text-align: center"
          >
            <span>{{ scope.row.distributePrice }}%</span>
            <span>终端价</span>
          </div>
        </div>
      </template>
    </el-table-column>

    <el-table-column
      header-align="center"
      :min-width="160"
      label="配送服务编号"
      prop="distributeServeNo"
    />
    <el-table-column
      :min-width="120"
      align="center"
      label="状态"
      v-if="booleState"
    >
      <template #default="scope">
        {{ getLabel('distribute_status', scope.row.rddStatus) }}
      </template>
    </el-table-column>
    <el-table-column
      :min-width="120"
      align="center"
      label="操作类型"
      v-if="boole"
    >
      <template #default="scope">
        <div style="line-height: 20px">
          <span v-if="scope.row.updateType == 1 && scope.row.rddStatus != 1">新增配送</span>
          <span v-if="scope.row.updateType == 2">取消配送</span>
        </div>
        <div
          v-if="scope.row.flowStatus == 'DOING' && scope.row.updateType === 2"
          class="flow-status-color"
          style="line-height: 20px"
        >审核中</div>

      </template>
    </el-table-column>

  </table-view>
  <!--配送商详情-->
  <detail-drawer
    ref="distributeNameRef"
    append-to-body
    custom-title
  >
    <template #title>
      {{ obj?.distributeName }}
    </template>
    <template #contents>
      <distributorInfo :id="obj?.distributeId" />
    </template>
  </detail-drawer>

</template>

<script>
import {defineAsyncComponent, defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  props: {
    list: {
      type: Array,
      default: [],
    },
    unit: {
      type: String,
      default: '',
    },
    boole:{
      type: Boolean,
      default: true,
    },
    booleState:{
      type: Boolean,
      default: true,
    }
  },
  components: {
    distributorInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/distributor/distributorInfo'
      )
    ),
  },
  setup(props) {
    const data = reactive({
      distributeNameRef: null,
      obj: {},
    })

    const handlToDistributeName = (row) => {
      data.obj = row
      data.distributeNameRef.open()
    }

    return {
      ...toRefs(data),
      handlToDistributeName,
    }
  },
})
</script>

<style scoped>
:deep(.el-button--text) {
  padding: 0 !important;
}
</style>
